import React, { useState, useEffect } from 'react'
import './index.css'
import { useNavigate } from 'react-router-dom'
import { Popconfirm, message } from 'antd';
import axios from 'axios';
export default function Mymes() {
    const [mymes, setmymes] = useState([])
    useEffect(() => {
        axios.post('http://localhost:3001/mycenter/mymes').then((res) => {
            setmymes(res.data)
        })
    }, [])
    const navigate = useNavigate()
    function lookmes(num) {
        return () => {
            navigate('lookMes?' + num)
        }
    }
    function delmes(id) {
        return () => {
            axios.post('http://localhost:3001/mycenter/delMymes', { id }).then((res) => {
                if (res.data.code == 1) {
                    const newMymes = [...mymes];
                    newMymes.forEach((v, i) => {
                        if (v.id === id) {
                            newMymes.splice(i, 1)
                        }
                    })
                    setmymes(newMymes);
                    message.success('删除成功');
                }
            })

        }
    }
    return (
        <div>
            <h3 className="tt">我的消息</h3>
            <ul className='mesLis'>
                <li>
                    <span>标题</span>
                    <span>发货时间</span>
                    <span>状态</span>
                    <span>操作</span>
                </li>
                {
                    mymes.map((mymes, i) => {
                        return <li key={i}>
                            <span>{mymes.title}</span>
                            <span>{mymes.time}</span>
                            <span>{mymes.state}</span>
                            <span>
                                <button onClick={lookmes(mymes.id)}>查看</button>|

                                <Popconfirm
                                    title="你确定要删除这条信息吗?"
                                    onConfirm={delmes(mymes.id)}
                                    okText="删除"
                                    cancelText="取消">
                                    <button>删除</button>
                                </Popconfirm>
                            </span>
                        </li>
                    })
                }
            </ul>
        </div>
    )
}
